<template>
    <div>

  <div class="footer_guide">

      <a href="javascript:;" class="guide_item" :class="{on : '/order'===$route.path}" @click="goTo('/calendar/MyCalendar')">
        <span class="item_icon">
          <i class="el-icon-s-promotion" style="font-size: 35px;"></i>
        </span>
        <span>日程</span>
      </a>
      <a href="javascript:;" class="guide_item" :class="{on : '/order'===$route.path}" @click="goTo('/application/index')">
        <span class="item_icon">
          <i class="el-icon-s-shop" style="font-size: 35px;"></i>
        </span>
        <span>应用库</span>
      </a>

      <a href="javascript:;" class="guide_item" :class="{on : '/msite'===$route.path}" @click="goTo('/home')">
        <span class="item_icon" >
          <i class="el-icon-s-home"  style="font-size: 35px;"> </i>
        </span>
        <span >工作台</span>
      </a>

      <a href="javascript:;" class="guide_item" :class="{on : '/order'===$route.path}" @click="goTo('/mailbox/index')">
        <span class="item_icon">
          <i class="el-icon-s-comment" style="font-size: 35px;"></i>
        </span>
        <span>消息</span>
      </a>
      <a href="javascript:;" class="guide_itemc" :class="{on : '/profile'===$route.path}" @click="goTo('/sys/user/UserInfo')">
        <span class="item_icon">
          <i class="el-icon-user-solid" style="font-size: 60px; font-weight: bold; color: #1890FF;"></i>
        </span>
        <span style="color: #1890FF;">我的</span>
      </a>
    </div>


  </div>
</template>

<script>
  export default {
    data() {
      return {}
    },
    methods: {
      goTo(path) {
        this.$router.replace(path)
      },
      jump(p) {
        this.$router.push(p)
      }
    }
  }
</script>

  <style>
    .img {
      margin-left: 5%;
    }

    .footer_guide {
      border-top: 1px soild #e4e4e4;
      position: fixed;
      z-index: 100;
      left: 0;
      right: 0;
      bottom: 1px;
      font-size: 600px;
      background-color: #fff;
      width: 100%;
      height: 80px;
      display: flex;

    }

    .guide_item {
      display: flex;
      flex: 1;
      text-align: center;
      flex-direction: column;
      align-items: center;
      margin-top: 20px;
      color: #999999;
    }

    .guide_itemc {
      display: flex;
      flex: 1;
      text-align: center;
      flex-direction: column;
      align-items: center;
      margin-bottom: 50px;
      color: #999999;
    }
    .on {
      color: #02a774
    }
    .img {
      margin-left: 5%;
    }

    span {
      font-size: 14px;
      margin-top: 2px;
      margin-bottom: 2px;
    }

    .grid-content {
      border-radius: 4px;
      min-height: 35px;
    }
  </style>
